<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page import="xupt.se.ttms.model.Studio"%>
<%@page import="java.util.ArrayList"%>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>座位</title>
<link rel="stylesheet" type="text/css" href="/ttmsall/css/main.css" />
<link rel="stylesheet" type="text/css" href="/ttmsall/css/jquery.seat-charts.css" />
<link rel="stylesheet" type="text/css" href="/ttmsall/css/style.css" />
</head>
<body>

    <%@ include file="../top.jsp" %>
    <div class="row" style="padding:10px 10px">
    <!-- 左导航栏 -->
    <%@include file="../nav.jsp" %>

    <div class="col-md-10" style="padding-top:10px">
    
        <div style="padding: 15px;color:#139DD6">
            <div class="modelname">
                <label class="title">座位管理</label>
            </div>
        <div>
        <div class="wrapper">
            <div class="container">

              <div id="seat-map">
                <div class="front-indicator" background-color="#393D49" >
                                                 影院屏幕
                </div>
              </div>
       <div class="booking-details">
    
    <br>
    <br>
    <br>
    <br>
      <h3>已选中要修改的座位 (<span id="counter">0</span>):</h3>
      <ul id="selected-seats">
      </ul>
      <div id="legend">
      </div>
      <br>
          <input type="button" value="确定" class="btn btn-radius"  id ="submit" onclick="submit()"/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="button" class="btn btn-warm btn-radius" value="取消" />
    </div>

  </div>
</div>
      </div>
    </div>
  </div>
  
  
</div>
        
    
    </div>
</body>
    <script src="/ttmsall/js/jquery.min.js"></script>
    <script src="/ttmsall/js/jquery.seat-charts.min.js"></script>
    <script>
    	
    var rowAndcol = 0;
    var rowAndcol1 = 0;
    var firstSeatLabel = 1;
    var seat = ${seat};
    var count = 0;
    var url="";
    var destory = [];
    map = [];
    for(var i=0;i<${studio.studio_row_count};i++){
        map[i]="";
        for(var j=0;j<${studio.studio_col_count};j++){
            if(seat[rowAndcol++].seat_status==1)
                map[i]+="e";
            else{
                map[i]+="f"; 
                var s = rowAndcol-1;
                destory[count++]=seat[s].seat_id+"";
                count++;
            }
                
        }
    }
  
    $(document).ready(function(){
       
      var $cart = $('#selected-seats'),
          $counter = $('#counter'),
          $total = $('#total'),
          sc = $('#seat-map').seatCharts({
        map: map,
        seats: {
          f: {
            price   : 0,
            classes : 'first-class', 
            category: 'vip座'
          },
          e: {
            price   : 0,
            classes : 'economy-class', 
            category: '影院座位'
          }         
        },
        naming : {
          top : false,
          getLabel : function (character, row, column) {
            return firstSeatLabel++;
          },
          getId  : function(character, row, column) {
              return getSeatId(row,column);
          },
        },
        legend : {
          node : $('#legend'),
            items : [
            [ 'g', 'selected',   '选中座位' ],
            [ 'e', 'available',   '可用座位'],
            [ 'f', 'unavailable', '损坏座位']
            ]         
        },
        click: function () {
          if (this.status() == 'available') {
            $('<li>'+this.data().category+this.settings.label+'号座位'+'： <a href="#" class="cancel-cart-item">[删除]</a></li>')
              .attr('id','cart-item-'+this.settings.id)
              .data('seatId', this.settings.id)
              .appendTo($cart);
            $counter.text(sc.find('selected').length+1);
            $total.text(recalculateTotal(sc)+this.data().price);
            url+=this.settings.id+"-";
            console.log(url);
            return 'selected';
          } else if (this.status() == 'selected') {
            var i = url.lastIndexOf(this.settings.id);
            url = url.substring(0,url.indexOf(this.settings.id));
            console.log(url);
            $counter.text(sc.find('selected').length-1);
            $total.text(recalculateTotal(sc)-this.data().price);
            $('#cart-item-'+this.settings.id).remove();
            return 'available';
          } else if (this.status() == 'unavailable') {
            return 'unavailable';
          } else {
            return this.style();
          }
        }
      });
      $('#selected-seats').on('click', '.cancel-cart-item', function () {
        sc.get($(this).parents('li:first').data('seatId')).click();
      });
      sc.get(destory).status('unavailable');
  });
  function recalculateTotal(sc) {
    var total = 0;
    sc.find('selected').each(function () {
      total += this.data().price;
    });
    return total;
  }
  function submit() {
      $.post("updateSeat",{"ids":url},function(data){
          
          window.location.href="../studio/StudioServlet?method=searchByPage";
      });
  }
     
   
   function getSeatId(row,col) {
       for(var i=0;i<${studio.studio_row_count};i++){
           for(var j=0;j<${studio.studio_col_count};j++){
               if(seat[rowAndcol1].seat_row==row&&seat[rowAndcol1].seat_column==col){
                   return seat[rowAndcol1].seat_id;
               }
               rowAndcol1++;
           }
       }
  }
    
    </script>
</html>